<template>
	<view class="gy-switch" :class="{active: props.modelValue === props.activeValue, disabled: props.disabled}" @click.stop="clickFn">
		<view v-if="props.inactiveText" class="gy-switch-inactive" :style="{color: props.modelValue === props.inactiveValue ? props.activeColor : ''}">
            {{ props.inactiveText }}
        </view>
		<view class="gy-switch-core" :style="{backgroundColor: props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor}">
			<text :class="props.activeIcon" :style="{color: props.modelValue === props.activeValue ? props.activeIconColor : ''}"></text>
			<text :class="props.inactiveIcon" :style="{color: props.modelValue === props.inactiveValue ? props.inactiveIconColor : ''}"></text>
		</view>
		<view v-if="props.activeText" class="gy-switch-active" :style="{color: props.modelValue === props.activeValue ? props.activeColor : ''}">
            {{ props.activeText }}
        </view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed,
    	onMounted
    } from "vue";

    const emits = defineEmits(["change", "update:modelValue"]);

    const props = defineProps({
    	modelValue: {
    		type: [Boolean, String, Number]
    	},
    	disabled: {
    		type: Boolean,
    		default: false
    	},
    	activeValue: {
    		type: [Boolean, String, Number],
    		default: true
    	},
    	inactiveIcon: {
    		type: String
    	},
    	activeIcon: {
    		type: String
    	},
    	inactiveValue: {
    		type: [Boolean, String, Number],
    		default: false
    	},
    	activeText: {
    		type: String
    	},
    	inactiveText: {
    		type: String
    	},
    	activeColor: {
    		type: String,
    		default: "#409EFF"
    	},
    	inactiveColor: {
    		type: String,
    		default: "#C0CCDA"
    	},
    	activeIconColor: {
    		type: String,
    		default: "#ffffff"
    	},
    	inactiveIconColor: {
    		type: String,
    		default: "#f7f5f8"
    	}
    });

    function clickFn(){
    	if(!props.disabled){
    		if(props.modelValue === props.activeValue && props.modelValue !== props.inactiveValue){
    			emits('update:modelValue', props.inactiveValue);
                emits('change', props.inactiveValue);
    		}
    		if(props.modelValue !== props.activeValue && props.modelValue === props.inactiveValue){
    			emits('update:modelValue', props.activeValue);
                emits('change', props.activeValue);
    		}
    	}
    }
</script>

<style lang="scss" scoped>
	.gy-switch{
	    display: inline-flex;
	    align-items: center;
	    .gy-switch-inactive,
	    .gy-switch-active{
	        font-size: 30rpx;
	    }
	    .gy-switch-inactive{
	        padding-right: 10rpx;
	    }
	    .gy-switch-active{
	        padding-left: 10rpx;
	    }
	    .gy-switch-core{
	        position: relative;
	        width: 80rpx;
	        height: 48rpx;
	        border-radius: 200rpx;
	        @include flex-between-center;
	        padding: 0 4rpx;
					box-sizing: border-box;
	        text{
	            transition: 0.5s;
	        }
	        text:nth-child(1){
	            font-size: 18rpx;
	        }
	        text:nth-child(2){
	            font-size: 28rpx;
	        }
	    }
	    .gy-switch-core::after{
	        content: "";
					position: absolute;
					left: 6rpx;
					// top: 4rpx;
					z-index: 1;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #fff;
					transition: 0.5s;
	    }
	}
	.gy-switch.disabled{
	    opacity: 0.6;
	}
	.gy-switch.active{
	    .gy-switch-core{
	        text:nth-child(1){
	            font-size: 28rpx;
	        }
	        text:nth-child(2){
	            font-size: 18rpx;
	        }
	    }
	    .gy-switch-core::after{
	        transform: translateX(42rpx);
					left: -6rpx;
	    }
	}
	
</style>